/**
* @Description: 商品管理(客户)-详情
* @author  tangbin
* @date 2023/4/11
*/

<template>
  <div class="mh100">
    <div class="page-container">
      <!-- 新增商品 -->
      <div class="split-content-info" :style="{minHeight: height + 'px'}">
        <!-- 标题 -->
        <div class="split-content-title clearfix">
          <div class="split-title">
            <span style="display:inline-block; background-color: #1890FF;margin-bottom: -2px; margin-right: 8px; width: 3px; height: 14px"></span>
            <span style="display: inline-block; color: #333333; font-size: 16px;">基本信息</span>
          </div>
        </div>
        <div>
          <el-descriptions class="margin-top" :column="3" border>
            <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px" label="商品编码">{{ form.goodsCode }}</el-descriptions-item>
            <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px" label="商品名称">{{ form.goodsName }}</el-descriptions-item>
            <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px" label="替换商品编码">{{ form.replaceCode }}</el-descriptions-item>
            <el-descriptions-item label="商品分类">{{ form.goodsClass }}</el-descriptions-item>
            <el-descriptions-item label="规格型号">{{ form.specsModel }}</el-descriptions-item>
            <el-descriptions-item label="单位">{{ getDefaultUnitName(form.defaultUnit) }}</el-descriptions-item>
            <el-descriptions-item label="商品类型">{{ form.goodsType }}</el-descriptions-item>
            <el-descriptions-item label="仓库">{{ form.warehouseName }}</el-descriptions-item>
            <el-descriptions-item label="货位">{{ form.warehouseLocationCode }}</el-descriptions-item>
            <el-descriptions-item label="最新进货价">{{ getAmountFormatter(form.lastPurchasePrice) }}</el-descriptions-item>
            <el-descriptions-item label="平均成本价">{{ getAmountFormatter(form.averageCostPrice) }}</el-descriptions-item>
            <el-descriptions-item label="销售价">{{ getAmountFormatter(form.salesPrice) }}</el-descriptions-item>
            <el-descriptions-item label="最小库存">{{ form.minNumber }}</el-descriptions-item>
            <el-descriptions-item label="最大库存">{{ form.maxNumber }}</el-descriptions-item>
            <el-descriptions-item label="生产厂商">{{ form.manufacturer }}</el-descriptions-item>
            <el-descriptions-item label="渠道名称">{{ form.tenantName }}</el-descriptions-item>
            <el-descriptions-item label="数据来源">{{ getDataSourceName(form.source) }}</el-descriptions-item>
            <el-descriptions-item label="商品状态">{{ getGoodsStatus(form.status) }}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{ form.createTime }}</el-descriptions-item>
            <el-descriptions-item label="创建人">{{ form.creatorName }}</el-descriptions-item>
            <el-descriptions-item label=""></el-descriptions-item>
            <el-descriptions-item label="备注">{{ form.remark }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <!-- 图片 -->
        <div>
          <ul class="detail-block-row">
          <li>
            <label class="detail-field" style="width: 58px">图片：</label>
            <div>
              <!-- <img
                src="../../../assets/images/noImg.png"
                v-if="form.sysObsList.length <= 0"
                class="img_wh100"
              /> -->
              <el-image
                v-for="item in form.sysObsList"
                class="img_wh100"
                style="margin-right: 8px;"
                :src="item.objectUrl"
                :preview-src-list="[item.objectUrl]"
                fit="cover"
              ></el-image>
            </div>
          </li>
          </ul>
        </div>
      </div>

      <div class="h84_line"></div>
      <div class="bottom-btn">
        <div class="bottom-locate" >
          <el-button type="primary" @click="cancel">返回</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getTimeSeconds} from '@/utils/index.js'
import {getFileUrl} from '@/utils/index.js'
import {customerGoodsDetail, customerGoodsOrgs, getTypeAndClassInfos} from '@/api/basic/customerGoods.js'
import {toThousandFilter} from '@/utils/index.js'
import BigNumber from 'bignumber.js'

export default {
  name: 'TenantCustomerManageDetail',
  dicts: ['customer_goods_status', 'customer_goods_source', 'basic_data_goods_default_unit'],
  data() {
    return {
      id: this.$route.query.id,
      mountedTime: undefined, // mounted时间
      activatedTime: undefined, // activated时间
      height: 626,
      saveloading: false, // 点击确认旋转轮
      form: {sysObsList:[]},
    }
  },
  mounted() {
    this.mountedTime = new Date();
    this.id = this.$route.query.id;
    // console.log('id=', this.id);
    this.getCustomerGoodsDetail();
    // 解决表格设置固定高度导致列设置fixed后重新进来会错行问题
    this.tableHeight();
  },
  activated() {
    this.activatedTime = new Date();
    let isNew = false; // 默认不是新的
    if (this.id !== this.$route.query.id) {
      isNew = true; // 新的
    }
    this.id = this.$route.query.id;
    let seconds = getTimeSeconds(this.mountedTime, this.activatedTime);
    if (seconds >= 1 && isNew) {
      this.getCustomerGoodsDetail();
    }
    // 解决表格设置固定高度导致列设置fixed后重新进来会错行问题
    this.tableHeight();
  },
  methods: {
    tableHeight() {
      this.$nextTick(() => {
        let height = document.body.clientHeight - 90 - 40;// - 62 - 20;
        // 查询表单高度
        let s_height = 0;
        // 按钮容器高度
        // let btns_height = document.getElementById('comTabel').clientHeight;
        // 计算表格的高度
        this.height = height - s_height - 20 - 44;
      });
    },

    /**
     * 金额格式化
     */
     getAmountFormatter(value) {
      if (value === undefined || value === null || value === '') {
        return '';
      }
      let tm = new BigNumber(value);
      return toThousandFilter(tm.toFixed(2));
    },

    /**
     * 得到商品状态名称
     * @param {*} value 
     */
    getGoodsStatus(value) {
      let show = value;
      this.dict.type.customer_goods_status.some((item) => {
        if (item.value === value) {
          show = item.label;
          return true;
        }
      });
      return show;
    },

    /**
     * 数据来源
     * @param {*} value 
     */
    getDataSourceName(value) {
      let show = value;
      this.dict.type.customer_goods_source.some((item) => {
        if (item.value === value) {
          show = item.label;
          return true;
        }
      });
      return show;
    },

    /**
     * 获取单位名称
     * @param {*} value 
     */
    getDefaultUnitName(value) {
      let show = value;
      this.dict.type.basic_data_goods_default_unit.some((item) => {
        if (item.value === value) {
          show = item.label;
          return true;
        }
      });
      return show;
    },

    /**
     * 获取客户商品详情
     */
    getCustomerGoodsDetail() {
      customerGoodsDetail({id: this.$route.query.id}).then(res => {
        console.log('res=', res.data);
        if (res.code == 200) {
          this.form = res.data;
          if (this.form.sysObsList && this.form.sysObsList.length > 0) {
            this.form.sysObsList.forEach((item) => {
              item.objectUrl = getFileUrl(item.id);
            });
          } else {
            this.form.sysObsList = [];
          }
        } else {
          this.form.sysObsList = [];
        }
      }).catch(err => {
        this.form.sysObsList = [];
      });
    },

    cancel() {
      const obj = { path: "/basicData/tenantCustomerManage" };
      this.$tab.closeOpenPage(obj);
    },
  },
}

</script>

<style lang="scss" scoped>

</style>